<template>
  <div>
    <h1>饼图例子 01</h1>
    <div id="pie01" style="width: 80%; height: 500px"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("pie01"));
  const data = [
    { name: "进程宕机重启&服务不可用&内存泄漏", value: 10 },
    { name: "耗时严重&IO阻塞", value: 16 },
    { name: "数据库崩溃&落地异常", value: 1 },
    { name: "慢查询&热key&大key", value: 0 },
    { name: "扩缩容异常&负载失效&不均", value: 15 },
    { name: "配置&逻辑&链路&连接数异常", value: 20 },
    { name: "死循环&死锁&并发不安全", value: 10 },
    { name: "单点瓶颈&资源消耗严重", value: 11 },
  ];
  const legend = [];
  for (let i = 0; i < data.length; i++) {
    // const step = 2;
    legend.push({
      x: i % 2 ? "63%" : "85%",
      y: `${40 + Math.floor(i / 2) * 5}%`,
      // data: data.slice(i, i + step).map((e) => e.name),
      data: [data[i].name],
      textStyle: {
        fontSize: 16,
      },
    });
    // i += step;
  }

  // 绘制图表
  const options = {
    title: {
      text: "Referer of a Website",
      subtext: "Fake Data",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    // legend: {
    //   orient: "vertical",
    //   right: "80",
    //   top: "200",
    // },
    legend,
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "60%",
        data,
        label: {
          show: false,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  // 渲染图表
  Chart.setOption(options);
});
</script>

<style scoped></style>
